<ion-header>

  <ion-navbar color="mainColor">
    <ion-title>弹幕</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <div class="head">
    开启弹幕:
    <ion-toggle color="mainColor" [(ngModel)]="checked" (ionChange)="action(checked)" class="btn">
    </ion-toggle>
  </div>
  <ion-list *ngIf="barrshow">

    <ion-item *ngFor="let item of barrlist;let i=index" style="padding:8px 0;">
      <span title=`${item.bullent_content}` style="width: 76%;word-wrap: unset;float: left;text-align: initial;">{{item.Real_Name+': '+item.bullent_content}}</span>
      <div [ngClass]="{'swich-on':item.sta}" class="swich" style="float:right;" (click)="Light(item.id,i,item.sta)">
        <input #togg type="checkbox" value="" name="" />
        <div class="box">
          <span></span>
        </div>
      </div>

      <!-- <label class="toggle toggle-positive" (click)="Light(item.id,i,item.sta)" style="vertical-align: middle;margin-top: -6px;float:right;">
        <input type={{item.sta}} checked="item.sta" value="on">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label> -->
      <!-- <ion-label title=`${item.bullent_content}`>{{item.Real_Name+' : '+item.bullent_content}}</ion-label>
      <ion-toggle [(ngModel)]="item.sta" (ionChange)="Light(item.id,i,item.sta)"></ion-toggle> -->
    </ion-item>

  </ion-list>


</ion-content>

<ion-footer>
  <page-control [classcourseId]=courseclassid [unitId]=unitId></page-control>
</ion-footer>
